<!DOCTYPE html> 
<html>
  <head>
    <!--META-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.75">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!--CSS-->
    <link rel="stylesheet" href="API/css/themes/default/jquery.mobile.min.css" />
    <link rel="stylesheet" href="API/css/datatables/css/jquery.dataTables.css"/>
    <link rel="stylesheet" href="API/css/mycss.css" />
    <link rel="stylesheet" href="css/mycss.css" />

    <!--JS-->
    <script type="text/javascript" src="API/js/jquery.min.js"></script>
    <script type="text/javascript" src="API/js/jquery.mobile.min.js"></script>
    <!--<script type="text/javascript" src="API/js/highcharts.js"></script>-->
    <!--<script type="text/javascript" src="API/js/modules/exporting.js"></script>-->
    <script type="text/javascript" src="API/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="include/config.js"></script>
    <script type="text/javascript" src="API/js/fonctions.js"></script>
    <script type="text/javascript" src="js/fonctions.js"></script>

    <script type="text/javascript">
    checkMaintenance();
    checkAuthentification();
    
    ///////////////////
    //BLOCK VARIABLE GLOBAL
    ///////////////////
    var id_page = 104;

    ///////////////////
    //BLOCK FONCTIONS EVENEMENTS
    ///////////////////
    //A la construction de la page
    $(document).on('pageinit',function() {
        try {
            // Init commmun
            init_commun();

            // Init page
        } catch (er) {
            log(0, "ERROR(init_home):" + er.message);
        }
    });

    //Affichage de la page avant onload
    $(document).on('pageshow',function() {
        try {
            show_commun();
        } catch (er) {
            log(0, "ERROR(show):" + er.message);
        }
    });

    //Fin chargement page
    function OnLoad() {
        try {
            chargerMesReservations();
        } catch (er) {
            log(0, "ERROR(OnLoad):" + er.message);
        }
    }

    ///////////////////
    //BLOCK FONCTIONS METIER
    ///////////////////
    /**
     * @name chargerMesReservations
     */
    function chargerMesReservations(){
        try {
            var tabInput = { id_user : infoAuth["id_user"]};
            callBD("phpsql/getMesReservations.php", "POST", "json", tabInput, "retourMesReservations");            
        } catch (er) {
            log(0, "ERROR(chargerMesReservations):" + er.message);
        }
    }

    ///////////////////
    //BLOCK FONCTIONS AFFICHAGE
    ///////////////////
    /**
     * @name retourMesReservations
     * @param {json} p_retour
     */
    function retourMesReservations(p_retour){
        try {
            if(p_retour["strErreur"] == ""){
                var objDataTable = objDataTableFromJsonArray(p_retour["data"]["resultat"]["data"]);
            
                $('#div_mesReservation').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="tab_reservation"></table>' );
                var oTable = $('#tab_reservation').dataTable( {
                    "oLanguage": {"sUrl": "API/css/datatables/dataTables_I8N/lang_FR.json"},
                    "iDisplayLength": 10,
                    "sPaginationType": "full_numbers",
                    "aaData": objDataTable.data,
                    "aaSorting": [[0,'asc']],
                    "bScrollCollapse": true,
                    "bAutoWidth": false,
                    "aoColumns": [
                        { sTitle : "Numéro", sClass : "left"},
                        { sTitle : "Date de saisie", sClass : "center"},
                        { sTitle : "Titre", sClass : "left"},
                        { sTitle : "Etat", sClass : "left"},
                        { sTitle : "Action", sClass : "left"}
                    ],
                    aoColumnDefs: [
                        {
                            mRender: function ( data, type, row ) {
                                return row[objDataTable.entete["id"]];
                            },
                            aTargets: [ 0 ]
                        },
                        {
                            mRender: function ( data, type, row ) {
                                if ( type == 'display' ) {
                                    return getStrDateTimeFrFromUs(row[objDataTable.entete["date_saisie"]]);
                                }
                                return row[objDataTable.entete["date_saisie"]];
                            },
                            aTargets: [ 1 ]
                        },
                        {
                            mRender: function ( data, type, row ) {
                                var strText = row[objDataTable.entete["titre"]];
                                strText = '<a href="javascript:window.location = (\'./page_livre.html?mili='+getMilise()+'&id='+row[objDataTable.entete["id_livre"]]+'\');">'+row[objDataTable.entete["titre"]]+'</a>';
                                return strText;
                            },
                            aTargets: [ 2 ]
                        },
                        {
                            mRender: function ( data, type, row ) {
                                var strText = "Etat";
                                if(row[objDataTable.entete["id_resa_enCours"]] == row[objDataTable.entete["id"]]){
                                    strText = 'Article disponible';
                                }else{
                                    strText = 'En attente';
                                }
                                return strText;
                            },
                            aTargets: [ 3 ]
                        },
                        {
                            mRender: function ( data, type, row ) {
                                var strText = "";
                                if((row[objDataTable.entete["date_retrait"]] == "0000-00-00 00:00:00")&&(row[objDataTable.entete["id_user"]] == infoAuth["id_user"])){
                                    strText = '<a href="javascript:annuler();" data-role="button" data-inline="true" data-icon="delete" data-mini="true">Annuler ma r&eacute;servation</a>';
                                }
                                if((row[objDataTable.entete["date_retrait"]] != "0000-00-00 00:00:00")&&(row[objDataTable.entete["id_user"]] == infoAuth["id_user"])){
                                    strText = '<a href="javascript:rendre();" data-role="button" data-inline="true" data-icon="back" data-mini="true">Rendre l\'article</a>';
                                }
                                return strText;
                            },
                            aTargets: [ 4 ]
                        }
                    ],
                    "fnDrawCallback": function( oSettings ) {
                        $('#tab_reservation').trigger('create');
                    } 
                });
            } else{
                notification("Erreur : "+p_retour["strErreur"], _ALERT);
            }
        } catch (er) {
            log(0, "ERROR(retourMesReservations):" + er.message);
        }
    }
</script>

</head>
<body onload="OnLoad();">

    <!-- page -->
    <div data-role="page" data-title="Titre">

        <!-- /panel -->
        <div data-role="panel" id="mypanel" data-display="overlay" data-position="left">

        </div>
        <!-- /panel -->

        <!-- header -->
        <div data-role="header" data-position="fixed">
            <a href="#mypanel" data-role="button" data-icon="home" data-iconpos="notext">home</a>
            <h1 id="id_titre">titre</h1>
            <a href="javascript:window.location = ('./page_contact.html?mili='+getMilise());" data-role="button" data-icon="info" data-iconpos="notext">Contact</a>
        </div>
        <!-- /header -->
        
        <!-- navbar -->
        <!-- /navbar -->

        <!-- content -->
        <div data-role="content" id="main_content">
            <div data-role="collapsible" data-collapsed="false" data-mini="true">
                <h4>Mes r&eacute;servations</h4>
                <div id="div_mesReservation">Pas de r&eacute;servation en cours.</div>
                <br>
            </div>       
        </div>
        <!-- /content -->

        <!-- footer -->
        <div data-role="footer" data-position="fixed">
            <a data-role="button" data-icon="search" data-iconpos="notext" class="ui-btn-left" href="javascript:window.location = ('./page_faq.html?mili='+getMilise());">FAQ</a>
            <h1 id="id_affichageUser">User</h1>
            <a data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" href="javascript:window.location = ('./page_sortie.html?mili='+getMilise());">Logout</a>
        </div>
        <!-- /footer -->

    </div>
    <!-- /page -->
</body>
</html>